<template>
  <div>
    <statistics :chooseTop="chooseTop" />
    <layout-main>
      <template #left>
        <echart-main class="echartMain">
          <template #title> 农民性别、劳动力 </template>
          <template #echart>
            <echart :options="options1" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 农民性别、学历 </template>
          <template #echart>
            <echart :options="options2" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 残疾类型 </template>
          <template #echart>
            <echart :options="options3" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 收入来源 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 参加养老、医疗保险情况 </template>
          <template #echart>
            <div class="ylao-yliao">
              <div class="option">
                <echart :options="options5One" />
              </div>
              <div class="option">
                <echart :options="options5Two" />
              </div>
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 健康分析 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 特殊人群TOP5 </template>
          <template #echart>
            <echart :options="options7" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 防反贫监测系统 </template>
          <template #echart>
            <echart :options="options8" />
          </template>
        </echart-main>
      </template>
      <template #bottom1>
        <echart-main class="bot">
          <template #title> 年龄结构统计 </template>
          <template #echart>
            <echart :options="options9" />
          </template>
        </echart-main>
      </template>
      <template #bottom2>
        <echart-main class="bot">
          <template #title> 民族成分统计 </template>
          <template #echart>
            <echart :options="options10" />
          </template>
        </echart-main>
      </template>
    </layout-main>
  </div>
</template>

<script>
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import Echart from "components/common/echart/Echart.vue";
import Statistics from "components/content/item/Statistics.vue";

import { PgetPeasantTop, PgetPeaPowerLeft, PgetPeasantRight } from "network/sy";
import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts6,
  echarts7,
  echarts8,
  echarts9,
  echarts10,
  echarts12,
  echarts13,
} from "./echartjs/echarts-nm";
export default {
  components: { LayoutMain, EchartMain, Echart, Statistics },
  data() {
    return {
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5One: null,
      options5Two: null,
      options6: null,
      options7: null,
      options8: null,
      options9: null,
      options10: null,
      chooseTop: [],
    };
  },
  created() {
    this.PgetPeasantTop();
    this.PgetPeaPowerLeft();
    this.PgetPeasantRight();
  },
  mounted() {
    this.echarts();
  },
  methods: {
    async PgetPeasantTop() {
      let result = await PgetPeasantTop();
      this.chooseTop = [
        {
          field: "nongmin",
          ico: require("assets/img/sy/gmIco5.png"),
          name: "农民总人数",
          value: {
            val: result.result.peopleNum,
            unit: "人",
            color: "color1",
          },
        },
        {
          field: "nonghu",
          ico: require("assets/img/sy/gmIco6.png"),
          name: "农民总户数",
          value: {
            val: result.result.registerNum,
            unit: "户",
            color: "color2",
          },
        },
        {
          field: "dibao",
          ico: require("assets/img/sy/gmIco8.png"),
          name: "低保户",
          value: {
            val: result.result.lowGuardNum,
            unit: "户",
            color: "color3",
          },
        },
        {
          field: "wubao",
          ico: require("assets/img/sy/gmIco9.png"),
          name: "五保户",
          value: {
            val: result.result.fiveGuardNum,
            unit: "户",
            color: "color4",
          },
        },
        {
          field: "teshu",
          ico: require("assets/img/sy/gmIco10.png"),
          name: "特殊人群数",
          value: {
            val: result.result.cadreNum,
            unit: "人",
            color: "color5",
          },
        },
      ];
      let lowGuardNum = result.result.lowGuardNum;
      let cureInsuranceNum = result.result.cureInsuranceNum;
      let zong = lowGuardNum + cureInsuranceNum
      let lowGuard = ((lowGuardNum / zong) * 100).toFixed(0)
      let cureInsurance = ((cureInsuranceNum / zong) * 100).toFixed(0)
      this.options5One = echarts12(lowGuard);
      this.options5Two = echarts13(cureInsurance);
    },
    async PgetPeaPowerLeft() {
      let result = await PgetPeaPowerLeft();
      console.log(result.result);
      let classs=[],man=[],woman=[];
      result.result.power.forEach(res => {
        classs.push(res.name);
        man.push(res.oneNum);
        woman.push(res.towNum)
      });
      this.options1 = echarts1({
        classs,
        man,
        woman,
      });
      let classs2=[],man2=[],woman2=[];
      result.result.diploma.forEach(res => {
        classs2.push(res.name);
        man2.push(res.oneNum);
        woman2.push(res.towNum)
      });
      this.options2 = echarts2({
        classs: classs2,
        man: man2,
        woman: woman2,
      });
      this.options3 = echarts3(result.result.disability);
      this.options4 = echarts4(result.result.income);
    },
    async PgetPeasantRight() {
      let result = await PgetPeasantRight();
      console.log(result.result);
      let rightx1=[],righty1=[];
      result.result.health.forEach(res => {
        rightx1.push(res.name);
        righty1.push(res.value)
      })
      this.options6 = echarts6(rightx1,righty1);
       let rightx2=[],righty2=[];
      result.result.special.forEach(res => {
        rightx2.push(res.name);
        righty2.push(parseInt(res.value))
      })
      this.options7 = echarts7(rightx2,righty2);
      this.options9 = echarts9(result.result.age);
      this.options10 = echarts10(result.result.nation);
    },
    echarts() {
      this.options8 = echarts8(
        ["一般脱贫户", "脱贫不稳定户", "边缘易致贫户", "严重困难户"],
        [100, 200, 300, 400]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 25%;
}
.bot {
  height: 100%;
}
.ylao-yliao {
  width: 100%;
  height: 100%;
  display: flex;
  .option {
    flex: 1;
  }
}
</style>